<template>
  <div class="product">
    <product-param :title="product.name">
      <template #buy>
        <button class="btn" @click="goToDetail">立即购买</button>
      </template>
    </product-param>
    <div class="bg-img">
      <h2>{{product.name}}</h2>
      <h3>{{product.subtitle}}</h3>
      <p>
        <a href="/#/index">全球首款双频 GP</a> <span>|</span>
        <a href="/#/index">骁龙845</a> <span>|</span>
        <a href="/#/index">AI 变焦双摄</a> <span>|</span>
        <a href="/#/index">红外人脸识别</a>
      </p>
      <div class="price">￥{{product.price}}</div>
    </div>
    <div class="bg-img2">
    </div>
    <div class="bg-img3">
    </div>
    <div class="item-swiper">
        <swiper :options="swiperOption" class="swiper">
           <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
           <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
           <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
           <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
           <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
           <!-- Optional controls -->
           <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
    </div>
    <div class="item-video">
      <h2>60帧超慢动作摄影<br>慢慢回味每一瞬间的精彩</h2>
      <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
      <div class="video-bg" @click="showSlide=true"></div>
      <div class="video-box" >
        <div class="overlay" v-if="showSlide"></div>
        <div class="video" :class="{'slide':showSlide}">
          <span class="icon-close" @click="showSlide=false"></span>
          <video src="/imgs/product/video.mp4" muted controls autoplay></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Swiper,SwiperSlide } from 'vue-awesome-swiper'
import "swiper/swiper-bundle.css";
import ProductParam from '../components/ProductParam'
export default {
    name:'product',
    components:{
      ProductParam,
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption:{
          autoplay:true,
          slidesPerView:3,
          spaceBetween: 30,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          }
        },
        showSlide:false,
        product:{}
      }
    },
    mounted(){
      let id=this.$route.params.id
       this.axios.get('/products/'+id).then((res) => {
        this.product=res
      })
    },
    methods: {
      goToDetail(){
      let id=this.$route.params.id
        this.$router.push('/detail/'+id)
      }
    },
}
</script>

<style lang='scss'>
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
.product{
  button{
    margin-left: 10px;
  }
  .bg-img{
    height: 718px;
    background: url('/imgs/product/product-bg-1.png') no-repeat 50%;
    text-align: center;
    h2{
      font-size: 80px;
      padding-top: 55px;
    }
    h3{
      font-size: 24px;
      letter-spacing: 10px;
    }
    p{
      font-size: 16px;
      margin-top:21px ;
      margin-bottom: 40px;
      a{
        color: #333333;
      }
      span{
        margin: 0 10px;
      }
    }
    .price{
      font-size: 30px;
      color: #333333;
    }
  }
  .bg-img2{
    background: url('/imgs/product/product-bg-2.png') no-repeat 50%;
    height: 480px;
    background-size: 1226px 397px;
  }
  .bg-img3{
    background: url('/imgs/product/product-bg-3.png') no-repeat 50%;
    height: 638px;
    background-size: cover;
  }
  .item-swiper{
        margin:36px auto 52px;
        .desc{
          font-size:18px;
          color:#333333;
          text-align:center;
        }
        img{
          width:100%;
        }
  }
  .item-video{
    height: 1044px;
    background-color: #000;
    margin-bottom: 76px;
    color: #ffffff;
    text-align: center;
    h2{
      font-size: 60px;
      padding-top: 82px;
      margin-bottom: 47px;
      
    }
    p{
        font-size: 24px;
        margin-bottom: 58px;
    }
    .video-bg{
      background: url('/imgs/product/gallery-1.png');
      background-size: cover;
      width: 1226px;
      height: 540px;
      margin: 0 auto 120px;
      cursor: pointer;
    }
    .video-box{
      .overlay{
        @include position(fixed);
        background-color: #000000;
        opacity: 0.5;
        z-index: 10;
      }
      .video{
        position: fixed;
        top: -50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 10;
        width: 1000px;
        height: 536px;
        opacity: 0;
        transition: all 0.6s;
        &.slide{
          top: 50%;
          opacity: 1;
        }
        .icon-close{
          position: absolute;
          top: 20px;
          right: 20px;
          @include bgImg(20px,20px,'/imgs/icon-close.png');
          cursor: pointer;
          z-index: 15;
        }
        video{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>